<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Chart Help Page</title>
  <style>
    BODY
    {
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      padding-top: 0px;
    }
    BODY
    {
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 10px;
      padding-top: 0px;
    }
    BODY
    {
      font-size: 13px;
      font-family: Verdana, Helvetica, Arial, sans-serif;
    }
    #bodyColumn
    {
      margin-left: 197px;
      margin-right: 1.5em;
    }
    .section
    {
      padding-right: 4px;
      padding-left: 4px;
      padding-bottom: 4px;
      padding-top: 4px;
    }
    .source
    {
      padding-right: 12px;
      padding-left: 12px;
      padding-bottom: 12px;
      margin: 1em 7px;
      padding-top: 12px;
    }
    .source
    {
      border-right: #999 1px solid;
      border-top: #999 1px solid;
      border-left: #999 1px solid;
      border-bottom: #999 1px solid;
    }
    .source PRE
    {
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      padding-top: 0px;
    }
    P
    {
      font-size: small;
      line-height: 1.3em;
    }
    CODE
    {
      font-size: 13px;
      font-family: Courier, monospace;
    }
    H2
    {
      border-right: #999 1px solid;
      padding-right: 4px;
      border-top: #999 1px solid;
      padding-left: 6px;
      font-weight: 900;
      font-size: x-large;
      padding-bottom: 4px;
      border-left: #999 1px solid;
      color: #900;
      padding-top: 4px;
      border-bottom: #999 1px solid;
      background-color: #ddd;
    }
    A
    {
      text-decoration: none;
    }
    A:link
    {
      color: #36a;
    }
    H3
    {
      border-right: #aaa 1px solid;
      padding-right: 4px;
      border-top: #aaa 1px solid;
      padding-left: 6px;
      font-weight: normal;
      font-size: large;
      padding-bottom: 4px;
      border-left: #aaa 1px solid;
      color: #900;
      padding-top: 4px;
      border-bottom: #aaa 1px solid;
      background-color: #eee;
    }
    LI
    {
      font-size: 13px;
      font-family: Verdana, Helvetica, Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="section">
    <h2>
      <a name="Introduction"></a>Introduction</h2>
    <p>
      The FreeSilverlightChart Control provides charting solution in a silverlight environment. It uses XAML and C# to display charts on the silverlight platform. 
    </p>
    <p>
      The FreeSilverlightChart Control supports the following chart types:
      <ul>
        <li><b>verticalBar</b> - A verticalBar chart uses a series of columns to compare values across groups.
          Groups are organized horizontally while values are displayed vertically in order to place more emphasis
          on comparing values and less emphasis on time. </li>
        <li><b>cylinderBar</b> - Similar to veriticalBar; howver in perspective mode, the bars are draws as cylinders. </li>
        <li><b>horizontalBar</b> - A horizontalBar chart uses a series of bars to compare values across groups.
          Groups are organized vertically while values are displayed horizontally in order to place more emphasis
          on comparing values and less emphasis on time.</li>
        <li><b>stackedVerticalBar</b> - A stacked vertical chart is used to compare the contribution of each value
          to a total across a series. </li>
        <li><b>stackedHorizontalBar</b> - Simlar to stackedVerticalBar except that the series and the groups are
          flipped</li>
        <li><b>pie</b> - One of the most widely used chart types, pie charts show how proportions of data contribute
          to a whole.</li>
        <li><b>area</b> - Area charts emphasize the degree of change over time, and also shows the relationship
          of parts to a whole.</li>
        <li><b>stackedArea</b> - A stacked area chart is an area chart that uses two or more data series and can
          be used to compare the degree of change to a total across a series</li>
        <li><b>line</b> - A line chart illustrates trends in data with the passing of time. </li>
        <li><b>barLine</b> - A barLine chart shows the combination of vertical bar and line chart. Each value
          from a series is alternated from a bar to a line, with the first series value displayed as a bar.</li>
        <li><b>XYLine</b> - An XYLine chart illustrates trends in data with the passing of time. It diffentiates
          from a normal line chart by having the X Values dictate the display along the X Axis. </li>
        <li><b>scatterPlot</b> - A scatterPlot chart uses value points to represent data. This chart needs both
          values along X and Y axis.</li>
        <li><b>radar</b> - A radar chart is a circular graph on which data are displayed in terms of values and
          angles.It is a circular chart used primarily as a comparative tool.</li>
        <li><b>radarArea</b> - This is similar to a radar chart except for the fact that the area enclosed by
          a series is filled.</li>
        <li><b>funnel</b> - A funnel charts show how proportions of data contribute to a whole. It is similar
          to a pie chart but displays as a funnel.</li>
        <li><b>circularGauge</b> - A circularGuage displays data in a gauge. It has a pivot point, around which
          a value is rotated so that it can be displayed in relation to maximum and a minimum.</li>
        <li><b>semiCircularGauge</b> - Similar to a circularGauge except for the fact that the gauge is semiCircular
          in shape.</li>
      </ul>
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="The_Chart_Model"></a>The Chart Model</h2>
    <p>
      The FreeSilverlightChart Control uses a model to access the data for displaying a chart. The specific
      model class must be of type <code>FreeSilverlight.ChartModel</code>.
    </p>
    <p>
      The chart values are draw using YValues 2D array property by the chart modal. Each element in this array
      must contain an array of doubles. These values in this array represent a series values with in a group.
      For XYLine and Scatter plots XValues 2D array property is also required.
    </p>
    <p>
      For Pie chart and Funnel chart if the YValues array length is more than one, multiple charts are shown.
      Each array element in the YValues is used to draw one chart.
    </p>
    <p>
      For circular and semiCircular gauge charts only one series in the YValues is used. Multiple charts are
      displayed if size of YValues array is greater than one. Each array element in the YValues is used to
      draw one chart.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Rendering_Chart"></a>Rendering Chart in a Canvas</h2>
    <p>
      The FreeSilverlightChart Control can be easily drawn on any canvas once a ChartModel is specified and a particular chart type is choosen. The following is a code snipped showing its usage:
    </p>
    <div class="source">
      <pre>
        &lt;UserControl 
        x:Class="ChartUsage.Page"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app="clr-namespace:AdvanceUsage">
          &lt;Canvas Width="680" Height="400" x:Name="parentCanvas"/>
        &lt;/UserControl>
      </pre>
    </div>
    <div class="source">
      <pre>
      public void Page_Loaded(object o, EventArgs e)
      {
        // Load the chart model my data
        ChartModel model = _loadChartModel();
        
        // create the chart and set the prefered properties
        Chart chart = Chart.CreateChart(Chart.ChartType.PIE, model);
        chart.IsPerspective = true;
        chart.LegendPosition = location;
        chart.AnimationDuration = 1.5;
        chart.YMajorGridCount = yMajorCount;
        chart.Format = myformat;
        
        // set the bounds of the chart control 
        chart.SetBounds(new Rect(0, 0, parentCanvas.Width, parentCanvas.Height));
        
        // add the custom component
        parentCanvas.Children.Add(chart);
        
        // setup the event handler
        chart.ChartClicked += new ChartEventHandler(ChartClicked);
        // now draw it
        chart.Draw();
      }
      </pre>
    </div>
  </div>
  <div class="section">
    <h2>
      <a name="Labeling"></a>Labeling</h2>
    <p>
      The FreeSilverlightChart Control provides flexibility for labeling of chart data. The YValues and group labels
      are the two types of labels used in a chart.
    </p>
    <div class="section">
      <h3>
        <a name="YValue_Labeling"></a>YValue Labeling</h3>
      The YValues(y axis labels for verticalBar, area, line etc. and x axis labels for horizontalBar) are
      labeled based on the YMajorGridLineCount. The maximum and minimum values are displayed for the YValues
      even if the YMajorGridLineCount=0.
    </div>
    <div class="section">
      <h3>
        <a name="Group_Labeling"></a>Group Labeling</h3>
      The group labels(x axis labels for verticalBar, area, line etc. and y axis labels for horizontalBar)
      are controlled by GroupLabels in the  chart model. Please note that the size of the
      groupLabels may not match the size of the YValues. If the groupLabels size is larger than the YValues
      size, the chart will display blank after the missing values. This is sometimes useful to chart incomplete
      data. The groupLabels array may also contain blanks or nulls so that label for an index is ignored.
      If the groupLabels size is less than the YValues, the axis is divided into portions equal to the size
      of groupLabels. This feature is useful for labeling large data set.
    </div>
  </div>
  <div class="section">
    <h2>
      <a name="Formatting"></a>Label Formatting</h2>
    <p>
      The formatting of the values displayed as labels is controlled by the Format property. The default format is "$#,##0.00;($#,##0.00);0". 
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Grid_Lines"></a>Grid Lines</h2>
    <p>
      The FreeSilverlightChart Control  displays displays vertical and horizontal grid lines inside charts.
      <div class="section">
        <h3>
          <a name="YValues_Grid_Lines"></a>YValues Grid Lines</h3>
        <p>
          The grid line for YValues(y axis for verticalBar, area, line etc. and x axis for horizontalBar) are
          controlled by YMajorGridLineCount. The number of yValue labels displayed are also controlled by this
          attribute. The maximum and minimum values are displayed and then a value is displayed corresponding
          to each major grid line.
        </p>
        <p>
          For gauge charts minor grid lines are displayed within a major grid section. YMinorGridLineCount attribute
          is used to control this feature.
        </p>
      </div>
      <div class="section">
        <h3>
          <a name="X_Grid_Lines"></a>X Grid Lines</h3>
        The property XMajorGridLineCount attribute controls the number of vertical major grid lines displayed
        in the chart. The default value is -1, which implies that the vertical major grid lines are controlled
        by the groupLabels in the chart model.
      </div>
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Legend"></a>Legend</h2>
    <p>
      The FreeSilverlightChart Control displays the series labels as a legend. The LegendPosition property
      of the chart component controls the display of the legend. The legend can be turned off by setting this
      attribute to &quot;FreeSilverlightChart.Chart.LegendLocation.NONE&quot;. Please note that legend is never displayed for circular and semicircular gauge chart since these charts display only one series.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Perspective"></a>Perspective</h2>
    <p>
      The FreeSilverlightChart Control can be displayed in perspective(2.5D) or in 2D. The perspective
      is purely a visual representation and does not provide any additional detail from a chart in 2D. Please
      note that perspective flag does not have any effect on radar and gauge charts.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Animation"></a>Animation</h2>
    <p>
      The FreeSilverlightChart Control provides support for animation during initial load. The animation
      is controlled by AnimationDuration property (in seconds). The default value is 1.5 seconds. Setting this attribute to 0 will turn off animation.
    </p>
    <p>
      Please note that the animation should be used with caution, it should not be used at the expense of
      usability. For e.g. if a page is periodically updating charts using a timer, animation will
      effect the usability of the chart.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Skinning"></a>Skinning</h2>
    <p>
      The FreeSilverlightChart Control provides support for skinning of the chart elements. The chart elements
      are rendered by using XAML returned by a class that implements <code>FreeSilverlightChart.LookAndFeel</code>interface. A Look and Feel can be registered with the Control using <code>Chart.RegisterLookAndFeel</code> static method. 
    </p>
    <p>
      The chart chart control comes with two LookAndFeel implementations : 1)GradientLookAndFeel and 2)TransparentLookAndFeel. A new LookAndFeel can be created by either extending one of these two classes or implementing <code>FreeSilverlightChart.LookAndFeel</code> interface. The GradientLookAndFeel is the default LookAndFeel that is registered with the Chart control.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="Tooltips"></a>Tooltips</h2>
    <p>
      The FreeSilverlightChart Control displays tooltips in response to the user moving the mouse on the
      chart data. The chart control may display multiple tooltips for area and radarArea charts if the user
      moves the mouse inside an area that is enclosed by multiple series. For line chart and area charts the
      tooltips display interpolated values. The tooltips display can be turned off by setting DisplayToolTip
      property to &quot;false&quot;.
    </p>
  </div>
  <div class="section">
    <h2>
      <a name="DrillDown"></a>DrillDown</h2>
    <p>
      The FreeSilverlightChart control triggers chartClicked event when the user drills clicks on the chart
      data. 
      The event handler must have the following signature: <code>ChartClicked(object sender, ChartEventArgs e)</code></p>
    <div class="source">
      <pre>
chart.ChartClicked += new ChartEventHandler(ChartClicked);
....
    private void ChartClicked(object sender, ChartEventArgs e)
    {
      // Handle the click based on the data that was clicked
    }
      </pre>
    </div>
  </div>
  </div>
</body>
</html>
